<script setup lang="ts">

    import type { HsaTableColumn, HsaTablePaginationProps } from "hsa-ui"
    import { ref } from 'vue'
    const data = ref([
        { name: '张三', age: 18 },
    ])

    for (let i = 0; i < 100; i++) {
        data.value.push({ name: '张三' + i, age: 18 + i })
    }

    setTimeout(() => {
        for (let i = 0; i < 100; i++) {
            data.value.push({ name: '张三' + i, age: 18 + i })
        }
    }, 3000 * 2)

    const dialogVisible = ref(false)

    const columns = ref<HsaTableColumn[]>([
        {
            prop: 'name',
            label: '姓名',
            align: 'center'
        },
        {
            prop: 'age',
            label: '年龄',
            align: 'center'
        },
        {
            label: '操作',
            align: 'center',
            type: 'button',
            buttonGroup: [
                {
                    type: 'primary',
                    label: '编辑',
                    size: 'small',
                    click: (_row) => {
                        dialogVisible.value = true
                    }
                }
            ]
        }
    ])


    const columns2 = ref<HsaTableColumn[]>([
        {
            prop: 'name',
            label: '姓名',
            align: 'center'
        },
        {
            prop: 'age',
            label: '年龄',
            align: 'center'
        },
        {
            label: '操作',
            align: 'center',
            type: 'button',
            buttonGroup: [
                {
                    type: 'primary',
                    label: '编辑',
                    size: 'small',
                    click: (_row) => {
                        dialogVisible.value = true
                    }
                }
            ]
        }
    ])


    const rowClick = (row: any) => {
        console.log('rowClick', row)
    }

    const paginationConfig = ref<HsaTablePaginationProps>({
        total: 10,
        pagerCount: 5,
        pageSize: 20,
    })
</script>

<template>
    <hsa-adaptive-container scrollbar>
        <hsa-adaptive-pane>
            <hsa-title-pane>
                <hsa-adaptive-pane>
                    <!-- 固定高度的内容 -->
                </hsa-adaptive-pane>
                <hsa-adaptive-pane autoHeight :minHeight="200">
                    <!-- 自动调整高度的内容 -->
                </hsa-adaptive-pane>
                <hsa-title-pane-item>
                    <template #title-suffix>
                        哈哈哈
                    </template>
                    <template #toolbar>
                        <el-button>Default</el-button>
                        <el-button type="primary">Primary</el-button>
                        <el-button type="success">Success</el-button>
                        <el-button type="info">Info</el-button>
                        <el-button type="warning">Warning</el-button>
                        <el-button type="danger">Danger</el-button>
                    </template>

                    <hsa-row collapseBtn>
                        <hsa-col :span="8">哈哈</hsa-col>
                        <hsa-col :span="8">哈哈</hsa-col>
                        <hsa-col :span="8" collapseCol>哈哈</hsa-col>
                        <hsa-col :span="8" collapseCol>哈哈</hsa-col>
                        <template #footbar>
                            <el-button type="success">Success</el-button>
                            <el-button type="info">Info</el-button>
                            <el-button type="warning">Warning</el-button>
                            <el-button type="danger">Danger</el-button>
                        </template>
                    </hsa-row>
                </hsa-title-pane-item>
            </hsa-title-pane>

            <hsa-title-pane :value="['test']">
                <hsa-title-pane-item name="test" title="你好">
                    <template #title-suffix>
                        哈哈哈
                    </template>
                    <template #toolbar>
                        <el-button>Default</el-button>
                        <el-button type="primary">Primary</el-button>
                        <el-button type="success">Success</el-button>
                        <el-button type="info">Info</el-button>
                        <el-button type="warning">Warning</el-button>
                        <el-button type="danger">Danger</el-button>
                    </template>

                    <hsa-row :gutter="20" collapseBtn>
                        <hsa-col :span="2">哈哈阿三大苏打大撒大苏打大苏打实打实大苏打</hsa-col>
                        <hsa-col :span="8">哈哈</hsa-col>
                        <hsa-col :span="8" collapseCol>哈哈</hsa-col>
                        <hsa-col :span="8" collapseCol>哈哈</hsa-col>
                        <template #footbar>
                            <el-button type="success">Success</el-button>
                            <el-button type="info">Info</el-button>
                            <el-button type="warning">Warning</el-button>
                            <el-button type="danger">Danger</el-button>
                        </template>
                    </hsa-row>
                </hsa-title-pane-item>
            </hsa-title-pane>

        </hsa-adaptive-pane>
        <hsa-adaptive-pane>
            <hsa-title-pane fill>
                <hsa-title-pane-item title="测试" fill>
                    <hsa-table show-index :data="data" :columns="columns" :paginationConfig="paginationConfig"
                        @row-click="rowClick"></hsa-table>
                </hsa-title-pane-item>
                <!-- <hsa-title-pane-item title="测试" fill>
                    测试
                </hsa-title-pane-item> -->
            </hsa-title-pane>
        </hsa-adaptive-pane>
        <hsa-adaptive-pane>
            <hsa-dialog v-model:visible="dialogVisible" title="你好">
                <hsa-table show-index :data="data" :columns="columns2" height="1000"></hsa-table>
            </hsa-dialog>

            <hsa-title-pane :steerable="['test']">
                <hsa-title-pane-item title="测试">
                    <hsa-title-box>你好</hsa-title-box>
                    <br>
                    <hsa-title-pane-item title="测试" name="test">
                        <hsa-title-box>神经病</hsa-title-box>
                        <br>
                    </hsa-title-pane-item>

                </hsa-title-pane-item>
            </hsa-title-pane>
        </hsa-adaptive-pane>
    </hsa-adaptive-container>
</template>

<style scoped>
    .logo {
        height: 6em;
        padding: 1.5em;
        will-change: filter;
        transition: filter 300ms;
    }

    .logo:hover {
        filter: drop-shadow(0 0 2em #646cffaa);
    }

    .logo.vue:hover {
        filter: drop-shadow(0 0 2em #42b883aa);
    }
</style>
